<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="车辆" v-bind="col" :wrapperCol="{xs:{span:24},sm:{span:18}}">
          <a-tree-select :style="{width:'50%'}" placeholder="请选择车辆" :treeData="houseList" treeCheckable :showCheckedStrategy="showCheckedStrategy" :maxTagCount="3" v-decorator="['houses_id',{rules:[{required:true,message:'请选择车辆'}]}]" />
         <!-- <span :style="{marginLeft:'8px',color:'rgba(0,0,0,.65)'}">等{{form.getFieldValue('houses_id')}}个车辆</span> -->
        </a-form-item>
        <a-form-item label="保存设置" v-bind="col" :wrapperCol="{xs:{span:24},sm:{span:18}}">
          <a-radio-group v-decorator="['save-set',{initialValue:'add'}]">
            <a-radio :style="{ display: 'block', height: '30px', lineHeight: '30px',marginTop: '5px'}" value="add">批量新增</a-radio>
            <div class="ant-form-explain">批量新增是指增加所选车辆的下面的收费标准</div>
            <a-radio :style="{ display: 'block', height: '30px', lineHeight: '30px',marginTop: '5px'}" value="del">批量删除</a-radio>
          </a-radio-group>
          <div class="ant-form-explain">批量删除是指删除所选车辆所有的收费标准，并添加下面的收费标准</div>
        </a-form-item>
        <a-form-item label="收费标准" v-bind="col" :wrapperCol="{xs:{span:24},sm:{span:18}}">
          <a-table size="small" :columns="columns" :dataSource="dataSource" rowKey="name">
            <template slot="operation" slot-scope="text,record">
              <a-dropdown>
                <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
                <a-menu slot="overlay" @click="operation($event,record)">
                  <a-menu-item key="1">删除</a-menu-item>
                </a-menu>
              </a-dropdown>
           </template>
          </a-table>
          <a-button type="dashed" block icon="plus" @click="() => { bzModal = true }">添加收费标准</a-button>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:6}}">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-modal title="添加收费标准" v-model="bzModal" :afterClose="() => { bzForm.resetFields(); }" :width="600" @ok="addBz">
      <a-form :form="bzForm" @submit="addBz">
        <a-form-item label="收费项目/收费标准" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-cascader placeholder="请选择收费项目/收费标准" :options="tollProject" @change="bzChange" v-decorator="['toll',{rules:[{required:true,message:'请选择收费项目/收费标准'}]}]" />
        </a-form-item>
        <a-form-item label="开始时间" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-date-picker :style="{width:'100%'}" placeholder="请选择开始时间" v-decorator="['start_time',{rules:[{required:true,message:'请选择开始时间'}]}]"></a-date-picker>
        </a-form-item>
        <a-form-item label="结束时间" :required="true" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-input-group class="ant-input-group-compact">
            <a-form-item :style="{width:'65%',marginRight:'16px'}" v-show="timeIsShow == false">
              <a-date-picker :style="{width:'100%'}" placeholder="请选择结束时间" v-decorator="['end_time']"/>
            </a-form-item>
            <a-form-item>
              <a-checkbox @change="({target:{checked}}) => {
                  timeIsShow = checked;
                  if(checked === true) bzForm.resetFields('end_time');
                }" v-decorator="['is_have_time',{initialValue:false}]">无结束时间</a-checkbox>
            </a-form-item>
          </a-input-group>
        </a-form-item>
        <a-form-item v-if="moneyShow" label="金额" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-input placeholder="请输入金额" :addonAfter="money_type_text" v-decorator="['money',{rules:[{required:true,message:'请输入金额'}]}]"></a-input>
        </a-form-item>
        <a-form-item label="备注" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-input placeholder="请输入备注" v-decorator="['remarks']"></a-input>
        </a-form-item>
        <a-form-item style="display:none;">
          <a-input type="hidden" v-decorator="['money_type']"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-spin>
</template>

<script>
  import { TreeSelect } from 'ant-design-vue'
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  export default {
    name: 'data_vehicle_bz',
    data() {
      return {
        moment,
        houseList:[], // 小区楼宇单元
        tollProject:[], // 收费标准
        baseURL:this.axios.defaults.baseURL,
        showCheckedStrategy:TreeSelect.SHOW_CHILD,
        bzModal:false,
        pro_id:3,//车辆
        timeIsShow:false,
        spinning:false,
        columns:[
          {
            title:'收费项目/收费标准',
            dataIndex:'name'
          },
          {
            title: '开始时间',
            dataIndex:'start_time'
          },
          {
            title: '结束时间',
            dataIndex:'end_time'
          },
          {
            title: '固定收费金额',
            dataIndex:'money'
          },
          {
            title: '备注',
            dataIndex:'remarks'
          },
          {
            title: '操作',
            dataIndex:'operation',
            scopedSlots:{customRender:'operation'}
          }
        ],
        dataSource:[], // 列数据
        form:this.$form.createForm(this),
        bzForm:this.$form.createForm(this),
        moneyShow:false,
        money_type_text:'',
        selectinfo:[],
        addInfo:[],
        col:{
          labelCol:{xs:{span:24},sm:{span:6}}
        },
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      if(typeof id !== 'undefined' && id){
          id = String(id);
          await this.getAllCommunityVehicle();
          this.getTollProject()
          this.form.setFieldsValue({houses_id:id.split(',')});
      }else this.$router.go(-1)
    },
    methods:{
       ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          console.log(values)
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          let param={
            houses_id:values.houses_id,
            action:values['save-set'],
            infos:this.dataSource,
          }
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/houses/TollProjectAdd',
            data:Object.assign(param,{token:this.token()}),
          }).then(res => {
            this.spinning = false;
            if(res.code == 0){
              this.$message.success('保存成功',1);
              this.$router.go(-1)
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2),this.spinning = false;});
        });
      },
      // 添加收费标准
      addBz(e) {
        e.preventDefault();
        this.bzForm.validateFields((err, values) => {
          if (err) {
            for (let key in err) {
              for (let item of err[key]['errors']) return this.$message.warning(item['message'], 2);
            }
          }
          let addarr={
            start_time:values.start_time.format('YYYY-MM-DD'),
            end_time:values.end_time?values.end_time.format('YYYY-MM-DD'):'',
            is_have_time:values.is_have_time,
            project_detail_id:values.toll[1],
            project_id:values.toll[0],
            money:values.money,
            money_type:values.money_type,
            remarks:values.remarks,
            name:this.selectinfo.label,
            type:this.pro_id
          }
          this.dataSource.push(addarr)
          this.bzModal =false
        })
      },
      // 收费标准选择
      bzChange(value, selectedOptions) {
         if(selectedOptions[1].style == 2) this.moneyShow = true;
         else this.moneyShow = false;
         this.money_type_text = [null,'元','分','角'][selectedOptions[0].money_type]
         this.selectinfo=selectedOptions[1]
         this.selectinfo.money_type=selectedOptions[0].money_type
         this.selectinfo.project_id=selectedOptions[0].value
         this.bzForm.setFieldsValue({money_type:selectedOptions[0].money_type});
      },
      // 获取收费标准
      getTollProject() {
        this.axios({
          method:'post',
          url:'/houses/getTollProject',
          data:{token:this.token()}
        }).then(res => {
          this.tollProject = res.data;
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        })
      },
      // 获取小区车辆
      getAllCommunityVehicle() {
        return new Promise((resolve, reject) => {
          this.axios({
            method:'post',
            url:'/vehicle/getAllCommunityVehicle',
            data:{token:this.token()}
          }).then(res => {
            if(res.code === 0){
              this.houseList = res.data;
              resolve();
            }else this.$message.warning(res.msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        });
      },
      operation({ key },info) {
        console.log(info)
        this.dataSource.forEach((item,key) => {
          if(item.project_detail_id==info.project_detail_id){
            this.dataSource.splice(key,1)
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
</style>